<template>
    <div style="width: 400px;height: 650px;text-align: center;">
        <el-row>
            <el-col :span="4" style="width: 100%;">
                <div class="top" style="height: 65px;width: 100%;">
                    <h4>ModelScope模型
                    </h4>
                </div>
            </el-col>

        </el-row>
        <el-row style="width: 100%;">
            <el-col :span="20" style="width: 100%;height: 455px;">
                <el-form ref="hdong" v-model="hdong"
                    style="width: 400px;height: 455px;overflow-y:scroll;overflow-x:hidden;">
                    <el-form-item v-for="(item, index) in textList" v-infinite-scroll="load" :key="index"
                        :label="item.title">
                        <el-input type="textarea" v-model="item.modelName" style="width: 320px;" :disabled="true"></el-input>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="20" style="width: 100%;height: 65px;">
                <el-col :span="20" style="width: 320px;">
                    <div class="input">
                        <el-input type="textarea" v-model="textarea" placeholder="请输入内容" clearable></el-input>
                    </div>
                </el-col>
                <el-col :span="10" style="width: 80px;">
                    <div class="submit">
                        <el-button type="success" @click="submit" round>提交</el-button>
                    </div>
                </el-col>
            </el-col>

        </el-row>
        <el-row>
            <el-col :span="4" style="width: 100%;height: 65px;">
                <div class="container" style="height: 65px;width: 100%;">
                    由于网络问题，结果生成需要一段时间，请耐心等待。<br>
                    技术支持：@思创数码技术中心/新技术研发部
                    <!-- <p>由于网络问题，结果生成需要一段时间，请耐心等待。</p>
                        <p>技术支持：@思创数码技术中心/新技术研发部</p> -->
                </div>
            </el-col>
        </el-row>
</div>
</template>

<script>

export default {
    name: 'ChatGpt',
    data() {
        return {
            // text: null,
            hdong: null,
            intervalMsg: null,
            // isIntervalMsg: false,
            isSend: false,
            count: 0,
            textList: [],
            textarea: null,
            text: { title: "", modelName: "" },
            chatReq: {
                "text": "",
                "prompt": "",
                "max_tokens": 2048,
                "temperature": 0.5,
                "top_p": 1,
                "frequency_penalty": 0,
                "presence_penalty": 0,
                "model": "text-davinci-003"
            },
            chatResp: {
                "id": "",
                "object": "",
                "created": 0,
                "model": "",
                "choices": [{
                    "text": "",
                    "index": 0,
                    "logprobs": null,
                    "finish_reason": ""
                }],
                "usage": {
                    "prompt_tokens": 0,
                    "completion_tokens": 0,
                    "total_tokens": 0
                }
            }
        }
    },
    created() {
        this.count = 0;
    },
    methods: {
        //加载方法，用来判断是问题还是回答
        load() {
            console.log(this.count);
            if (this.count == 1) {
                var str = this.textarea;
                var Text = new Object();
                Text.title = "问题";
                Text.modelName = str;
                this.textList.push(Text);
                this.count = 2;
                console.log(this.$refs['hdong'].scrollTop);
                console.log(this.$refs['hdong'].scrollHeight);
                this.$refs['hdong'].scrollTop = this.$refs['hdong'].scrollHeight;
                console.log(this.$refs['hdong'].scrollTop);
            } else if (this.count == 2) {
                if (!this.isSend) {
                    this.isSend = true;
                    // const url = "http://192.168.200.143:9999/health/health";
                    const url = "http://123.60.159.115:5000/gptTextByScript?text=" +this.textarea;
                    var str = null;
                    console.log(this.textarea);
                    this.chatReq.text = this.textarea;
                    //发送请求
                    this.axios.get(url
                    )
                        .then((resp) => {
                            console.log(resp);
                            // var str = resp.data.choices[0].text;
                            var str = resp.data;
                            var Text = new Object();
                            Text.title = "回答";
                            Text.modelName = str;
                            console.log(str);
                            this.textList.push(Text);
                            this.count = 0;
                            clearInterval(this.intervalMsg);
                            this.isSend = false;
                        })
                        .catch((error) => {
                            //登录失败 提供消息提示
                            // this.$message.error("访问失败!");
                            console.log(error);
                            var str = "访问失败！";
                            var Text = new Object();
                            Text.title = "回答";
                            Text.modelName = str;
                            console.log(str);
                            this.textList.push(Text);
                            this.count = 0;
                            clearInterval(this.intervalMsg);
                            this.isSend = false;
                        });

                }

            }
        },
        //点击按钮提交
        submit() {
            //判断输入框字符为空的情况
            if (this.textarea == null) {
                this.$message.error('输入为空，请输入问题！');
            } else {
                //提交问题
                if (this.count == 0) {
                    this.count = 1;
                    // this.load()
                    //启动定时器
                    this.interval();
                } else {
                    this.$message.error('上一个问题还没有回答完毕，请稍后再提交！');
                }
            }


        }
        //定时器，主要执行load方法
        , interval() {
            this.intervalMsg = setInterval(() => {
                this.load();
            }, 100);
        }
        , updated: function () {
            this.$nextTick(function () {
                this.hdong.scrollTop = this.hdong.scrollHeight;
            })

        }
    }
}
</script>

<style scoped>
.input1 {
    border: 10px;
    text-align: center;
}

.inputtext {
    height: 100%;
    width: 80%;
    float: left;
    background-color: blue;
}

.inputbutton {
    height: 100%;
    width: 19%;
    float: right;
    text-align: center;
    background-color: red;
}

.success {
    height: 100%;
    width: 100%;
    text-align: center;
}

.input {
    width: 94%;
    float: right;
}

.submit {
    height: 100%;
    width: 100%;
    text-align: center;
}
</style>
